<template>
  <Menus>
    <template v-slot:routeF> 商品管理 </template>
    <template v-slot:routeS> 商品列表 </template>
    <PageLayout>
      <template v-slot:header>
        <el-input v-model="query.id" placeholder="输入商品编码进行查询"></el-input>
        <el-button type="primary" @click="queryEvt">查询</el-button>
        <el-button @click="toGoodsEditPage()">新增</el-button>
      </template>
      <el-table :data="tableData" height="72vh" style="width: 100%">
        <el-table-column prop="id" label="商品编码" width="120" :fixed="true" />
        <el-table-column prop="type" label="商品类型" width="160" fixed="left"/>
        <el-table-column prop="title" label="商品简介" width="270" />
        <el-table-column prop="price" label="现价" width="120" />
        <el-table-column prop="oldPrice" label="原价" width="180" />
        <el-table-column prop="saleCount" label="月销量" width="120" />
        <el-table-column prop="shopName" label="出口商" min-width="150" />
        <el-table-column label="操作" width="160" fixed="right">
          <template v-slot="data">
            <span @click="toGoodsEditPage(data)" class="table-btn">编辑</span>
            <el-popconfirm
              width="260px"
              @confirm="deleteGoodsEvt(data.row)"
              :title="`确定要删除【${data.row.id}】的商品信息，不可以恢复，确定要删除？`"
            >
              <template #reference>
                <span class="table-btn">删除</span>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <template v-slot:footer>
        <el-pagination
          v-model:current-page="query.page"
          v-model:page-size="query.size"
          :small="true"
          :background="true"
          layout="total, prev, pager, next, sizes"
          :total="total"
          :page-sizes="[8, 20, 50, 150]"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </template>
    </PageLayout>
  </Menus>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import ajax from "../../apis/ajax.js";
import { ElMessage } from "element-plus";

const tableData = ref([]);
const query = reactive({
  id: "",
  page: 1,
  size: 20,
});
const total = ref(0);

onMounted(function () {
  getList();
});

function getList() {
  console.log("------------------");
  ajax({
    url: "/goods",
    params: {
      id: query.id,
      ...query,
    },
  }).then(({ data }) => {
    tableData.value = data.data.rows;
    total.value = data.data.total;
  });
}

/* 查询按钮 */
function queryEvt() {
  query.page = 1;
  query.size = 20;
  getList();
}

/* 行删除方法 */
function deleteGoodsEvt(row) {
  console.log(row, "--------------------------- 删除");
  ajax({
    url: "/goods/" + row.id,
    method: "delete",
  }).then(({ data }) => {
    if (data.code == 200) {
      getList();
      ElMessage({
        message: "信息删除成功",
        type: "success",
      });
    }
  });
}

/* 防抖 */
let timer = null;
function handleSizeChange() {
  pagingGetList();
}
function handleCurrentChange() {
  pagingGetList();
}
function pagingGetList() {
  clearTimeout(timer);
  timer = setTimeout(function () {
    getList();
  }, 200);
}

/* 行点击按钮事件 */
const router = useRouter();
function toGoodsEditPage(_data) {
  console.log("=================================编辑");
  if (!!_data) {
        router.push('/goods/edit?id=' + _data.row.id)
    } else {
        router.push('/goods/edit')
    }
}

</script>

<style lang="less">

</style>
